<script lang="ts">
import { useAuthed } from '~/composables/useAuthed';
import cs from '~/composables/useCS';
import { useLoginJudgment } from '~/composables/useLoginJudgment';
import { toPlayPage } from '~/pages/play/helpers';
import { allGamesPopup } from './AllGames.vue';
import GameIcon from './GameIcon.vue';

type TGameTypeList = Api.GetData<typeof apis.apiGameAll>['game_list'];

function buildPopupContainerGetter() {
  const ins = getCurrentInstance();

  return () => {
    const el = ins?.proxy?.$el;
    return el && el.closest('.ant-drawer-wrapper-body');
  };
}
</script>

<script setup lang="ts">
const router = useRouter();
const authed = useAuthed();
const { openModal } = useLoginJudgment();
const { gameTypes } = queries.useGameAllQuery();
const gameTypesMenu = computed(() => gameTypes.value?.filter(x => x.show_position === 1 || x.show_position === 3));
const getPopupContainer = buildPopupContainerGetter();
const appStore = useAppStore();

function toGameList(detail: TGameTypeList[0] | { alias: string }) {
  router?.push(buildGameListRoute(detail));
}
</script>

<template>
  <menu class="m-2 mt-4 box-content select-none list-none p-0">
    <div class="item" @click="openModal(() => globalPopups.lottery.open())">
      <i class="icon i-local:bonuses--wheel-icon" />
    </div>
    <div class="item" @click="$router.push({ name: RN.INDEX })">
      <i class="icon i-local:home" />
    </div>

    <!-- 游戏类型 -->
    <template v-for="typeItem in gameTypesMenu" :key="typeItem.type_id">
      <!-- 可展开的游戏类型 -->
      <APopover
        v-if="typeItem.is_expand && typeItem.game?.length"
        :getPopupContainer="getPopupContainer" :align="{ offset: [15, -90] }"
        :arrow="false" overlayClassName="menu-game-list-overlay" placement="rightTop"
      >
        <li class="item">
          <img :src="$store.app.getCdnResPath('gameTypeIcon', typeItem.alias)" class="icon">
        </li>
        <template #content>
          <div class="grid grid-cols-2 w-100 gap-2">
            <div
              v-for="game in typeItem.game" :key="game.name"
              class="item" :class="typeItem.game.length < 30 ? '!text-4' : '!text-3.5 !py-2'"
              @click="toPlayPage(game)"
            >
              <!-- <img :src="$store.app.joinCdnPath(game.image_icon)" class="icon !size-1.2em"> -->
              <GameIcon class="icon !size-1.2em" :icon="game.image_icon" />
              <span class="name lh-none">{{ game.name }}</span>
            </div>
          </div>
        </template>
      </APopover>

      <!-- 不可展开的游戏类型 -->
      <ATooltip v-else :title="typeItem.name" placement="right">
        <li class="item" @click="toGameList(typeItem)">
          <img :src="$store.app.getCdnResPath('gameTypeIcon', typeItem.alias)" class="icon">
        </li>
      </ATooltip>
    </template>

    <div class="divider-h-gradual" />
    <template v-if="authed">
      <!--  收藏 、最近  -->
      <ATooltip :title="$t('gX5Jx50a8Idp1v0WcR0Q')" placement="right">
        <div class="item relative" @click="toGameList({ alias: 'like' })">
          <i class="icon i-local:collection text-sys-text-body" />
        </div>
      </ATooltip>
      <ATooltip :title="$t('jb5f92ZdiD5lNxJb94dzz')" placement="right">
        <div class="item relative" @click="toGameList({ alias: 'recent' })">
          <i class="icon i-local:recently" />
        </div>
      </ATooltip>
    </template>
    <ATooltip :title="$t('yaumayCeCeamLBiC9G8Dn')" placement="right">
      <div class="item relative" @click="globalPopups.searchPopup.open?.()">
        <i class="icon i-local:search" />
      </div>
    </ATooltip>

    <div class="divider-h-gradual" />

    <!-- 其他导航 -->
    <ATooltip v-if="$store.user.userType !== 7" :title="$t('kvtgHlvWm62cnaLsDMf4P')" placement="right">
      <div class="item relative" @click="$router.push({ name: RN.REFERRAL })">
        <i class="icon i-local:referral-2?mask" />
        <div class="absolute top-0 rounded-1 bg-sys-layer-e px-1 text-3 text-green -right-1">
          $
        </div>
      </div>
    </ATooltip>
    <!-- <ATooltip :title="$t('kvtgHlvWm62cnaLsFS543')" placement="right"> -->
    <!--  <div class="item relative" @click="router.push({ name: RN.NEWS })"> -->
    <!--    <i class="icon i-local:blog" /> -->
    <!--  </div> -->
    <!-- </ATooltip> -->
    <ATooltip v-if="appStore.handshake?.is_agent === 0" placement="right">
      <template #title>
        {{ $t('0UwU0LYzHs92rE3M2nnEz') }}
      </template>
      <div class="item" @click="router.push({ name: RN.AFFILIATE })">
        <i class="icon i-local:affiliate-2?mask" />
      </div>
    </ATooltip>
    <ATooltip :title="$t('td0nRGoBbJUiAlLGkm')" placement="right">
      <div class="item relative" @click="$router.push({ name: RN.RANK })">
        <i class="icon i-local:contest?mask" />
      </div>
    </ATooltip>
    <ATooltip :title="$t('bp9UZoiYfq3PD2V4qync')" placement="right">
      <div class="item relative" @click="globalPopups.langPopup.open()">
        <i class="icon i-ion:earth?mask" />
      </div>
    </ATooltip>

    <div class="divider-h-gradual" />

    <ATooltip placement="right">
      <template #title>
        <div>{{ $t('4mLMgJmQq4YIqObGTbv') }}</div>
        <div>{{ $t('9yALhjF8fJraayu0mOx1A') }}</div>
      </template>
      <div class="item relative" @click="cs.show">
        <i class="icon i-local:support?mask" />
      </div>
    </ATooltip>

    <ATooltip placement="right">
      <template #title>
        {{ $store.app.appName }} APP
      </template>
      <div class="item relative" @click="router.push({ name: RN.INSTALL_APP })">
        <i class="icon i-ri:download-2-line" />
      </div>
    </ATooltip>

    <allGamesPopup.PresetComponent />
  </menu>
</template>

<style scoped lang="scss">
.item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  font-size: 20px;
  color: theme('colors.sys.text.body');

  &:hover,
  &.ant-popover-open {
    background-color: theme('colors.sys.layer.d');
    color: theme('colors.sys.text.head');
  }

  & + & {
    margin-top: 4px;
  }

  > .icon {
    flex: none;
    width: 1em;
    height: 1em;
  }

  > .name {
    margin-right: auto;
    margin-left: 8px;
  }
}

:global(.menu-game-list-overlay .ant-popover-inner-content) {
  max-height: calc(100vh - 290px);
  overflow: auto;
  overscroll-behavior: none;
}
</style>
